<template>
    <!-- 歌单播放列表 -->
    <div class="gedanlistcontanier">
        <!-- {{ SongDetails.tracks }} -->
        <div class="gedantop">
            <div class="bofang">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang-copy"></use>
                </svg>
            </div>
            <div class="bofangcount">
                播放全部
            <span class="alls">(共{{gedanlst.length}}首)</span>
            </div>
            <div class="shoucangcount">
                +收藏({{ SongDetails.subscribedCount }})
            </div>
        </div>
        <!--歌曲列表 -->
        <div class="gedanbody">
            <ul>
                <li v-for="( item , index ) in gedanlst" :key="index">
                    <!-- 歌单 -->
                    <div class="left" @click="playmusic(index)">
                        <div class="count">{{index+1}}</div>
                        <div class="name">{{item.name}}</div>
                        <div class="geshou">{{item.ar[0].name}}</div>
                    </div>
                    <!-- 播放 -->
                    <div class="bf">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-bofang-copy"></use>
                        </svg>
                    </div>
                    <!-- 列表 -->
                    <div class="dian">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-diandiandianshu"></use>
                        </svg>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { SongDetails } from '@/api';
import { mapMutations } from 'vuex';
import { ref } from 'vue';
export default {
    name: 'ItemgedanList',
    setup(props){
        // console.log(props);
    },
    methods:{ // 点击歌曲列表，播放歌曲
        playmusic:function (index) {
            // alert(id)
            this.updatePlayList(this.gedanlst)
            // console.log(index+1);
            this.updatePlayListIndex(index)

        },
        ...mapMutations(['updatePlayList','updatePlayListIndex'])
    },
    //接收数据
    props:['SongDetails','gedanlst'],
};
</script>

<style lang="scss" scoped>
.gedanlistcontanier{
    width: 100%;
    background: #fff;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
    .gedantop{
        display: flex;
        justify-content: space-around;
        .icon{
            margin-top: .14rem;
        }
        .shoucangcount{
            width: 30%;
            height: 0.6rem;
            background: red;
            text-align: center;
            line-height: .6rem;
            color: #fff;
            border-radius: .6rem;
            font-size: .28rem;
            margin-top: .1rem;
        }
        .bofangcount{
            line-height: .8rem;
            width: 60%;
            .alls{
                font-size: .24rem;
            }
        }
    }
    .gedanbody{
        ul{
            li{
                display: flex;
                width: 100%;
                line-height: .8rem;
                margin: .2rem 0;
                font-size: .24rem;
                .icon{
                    margin-top: .18rem
                }
                .count{
                    width: 15%;
                    text-align: center;
                }
                .name{
                    width: 45%;
                }
                .geshou{
                    width: 40%;
                    font-weight: 700;
                }
                .bf{
                    width: 10%;
                }
            }
        }
        .left{
            display: flex;
            width: 80%;
        }
    }
}
</style>